<template>
  <div class="body" ref="body">
    <div
      v-if="false"
      class="no-message"
    >
      暂时没有新消息
    </div>
    <message
      v-for="(item, index) in (currentWindowIsGroup ? groupList[currentWindowObject].chatHistory : chatHistory[currentWindowUuid])"
      :key="index"
      :data="item"
    ></message>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Message from './Message'

export default {
  name: 'Body',
  components: {
    Message
  },
  computed: {
    ...mapState([
      'currentWindowUuid',
      'chatHistory',
      'groupList',
      'currentWindowIsGroup',
      'currentWindowObject'
    ])
  },
  updated () {
    setTimeout(() => {
      let temp = this.$refs.body
      temp.scrollTop = temp.scrollHeight
    }, 100)
  }
}
</script>

<style lang="stylus" scoped>
  .body
    overflow auto
    overflow-x hidden
    height 450px
    padding 20px
    border-bottom 1px solid #ccc
    .no-message
      text-align center
      padding 22px
      color #bbb
</style>
